<template>
	<view class="page">
		<view class="header-line">
			<view class="return-btn" @click="backPage"></view>
			<view class="text">岗位详情</view>
		</view>
		<view class="main-content">
			<view class="job-detail">
				<view class="header">
					<view class="company-info">
						<view class="company-logo" :style="`--icon: url(${cicon})`"></view>
						<view class="company-meta">
							<view class="company-name">{{ cname }}</view>
							<view class="company-tags">
								<view class="tag" v-if="companyCount">{{ companyCount }}</view>
								<view class="tag" v-if="ctag">{{ ctag }}</view>
							</view>
						</view>
					</view>
					<view class="job-header">
						<view class="job-title-wrap">
							<view class="job-title">{{ jname }}</view>
							<view class="job-status" :style="`--c: ${statusTextColor}; --bg: ${statusBgColor}`">{{
								status }}</view>
						</view>
						<view class="job-meta">
							<view class="salary">{{ money }}</view>
							<view class="job-tags">
								<view class="tag" v-for="tagItem in jtags" :key="tagItem">{{ tagItem }}</view>
							</view>
							<view class="meta-items">
								<view class="meta-item">
									<view class="meta-icon" :style="`--icon: url(${ base_url }/static/img/location.svg)`"></view>
									<view>{{ city }}</view>
								</view>
								<view class="meta-item">
									<view class="meta-icon" :style="`--icon: url(/${ base_url }static/img/education.svg)`"></view>
									<view>{{ level }}</view>
								</view>
								<view class="meta-item">
									<view class="meta-icon" :style="`--icon: ${ base_url }url(/static/img/time.svg)`"></view>
									<view>{{ time }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="content">
					<view class="section">
						<view class="section-title">职位亮点</view>
						<view class="job-highlights">
							<view class="highlight-item" v-for="(jobHigh, index) in goods" :key="index">
								<view>{{ jobHigh }}</view>
							</view>
						</view>
					</view>
					<view class="section">
						<view class="section-title">职位描述</view>
						<view class="description">
							<view>
								<view class="li" v-for="item in description" :key="item">{{ item }}</view>
							</view>
						</view>
					</view>
					<view class="section">
						<view class="section-title">岗位要求</view>
						<view class="requirements">
							<view>
								<view class="li" v-for="item in jobRequirements" :key="item">{{ item }}</view>
							</view>
						</view>
					</view>
					<!-- <view class="section">
						<view class="section-title">工作地址</view>
						<view class="address"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
								fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
								class="lucide lucide-map-pin-icon address-icon">
								<path
									d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0">
								</path>
								<circle cx="12" cy="10" r="3"></circle>
							</svg>
							<view class="address-info">
								<view class="address-text">北京市海淀区科学园区</view>
								<view class="address-detail">科创大厦B座</view>
							</view>
						</view>
					</view> -->
				</view>
				<view class="actions">
					<view class="action-btn collect">
						<view class="icon" :style="`--icon: url(${ base_url }/static/img/star.svg)`"></view>
						收藏
					</view>
					<view class="action-btn apply">立即投递</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { job } from '../../server/job';
import { base_url } from '../../server/config';

import { getCompanyIcon } from '../../service/file';

import { formatTimeToText } from '../../util/tool';

export default {
	data() {
		return {
			base_url,
            id: "",
			cname: "",
			cicon: "",
			companyCount: "",
			ctag: "",
			jname: "",
			jtags: "",
			status: "",
			statusTextColor: "",
			statusBgColor: "",
			money: "",
			city: "",
			level: "",
			time: "",
			goods: [],
			jobRequirements: [],
			description: []
		}
	},
	methods: {
		backPage() {
			uni.navigateBack();
		}
	},
	onLoad(options) {
		console.log(options); // 输出传递过来的 id 参数
		this.id = options.id;
		getJobDetail(this);
	},
	onShow() {
		console.log('onshow');
	}
}

async function getJobDetail(self) {
	let id = self.id;
	job.getJobDetail(id).then(async (res) => {
		console.log(res);
		if (res.success) {
			self.cname = res.job.cname;
			self.cicon = await getCompanyIcon(res.job.cicon);
			self.companyCount = res.job.companyCount;
			self.ctag = res.job.ctag;
			self.jname = res.job.jname;
			self.jtags = JSON.parse(res.job.jtags);
			self.status = res.job.status;
			self.statusTextColor = res.job.statusTextColor;
			self.statusBgColor = res.job.statusBgColor;
			self.money = res.job.money;
			self.city = res.job.city;
			self.level = res.job.level;
			self.time = formatTimeToText(res.job.time);
			self.goods = JSON.parse(res.job.goods);
			self.jobRequirements = JSON.parse(res.job.jobRequirements);
			self.description = JSON.parse(res.job.description);
		} else {
			uni.showToast({
				title: '获取岗位详情失败',
				icon: 'none'
			});
		}
		// job:
		// 	cicon: 2
		// 	city: "佛山市"
		// 	cname: "互成一家"
		// 	companyCount: "0-20人"
		// 	ctag: "互联网"
		// 	description: "负责设计公司所需的图标元素"
		// 	goods: "["快速晋升", "sovo"]"
		// 	id: 3
		// 	isDeliver: 0
		// 	jname: "Icon设计师"
		// 	jobRequirements: "["本科及以上学历，计算机相关专业优先", "熟练掌握 HTML、CSS、JavaScript", "熟悉 React 或 Vue 等主流框架", "有良好的代码风格和编程习惯", "有强烈的求知欲和进取心"]"
		// 	jtags: "["xd", "PS", "AE"]"
		// 	level: "本科"
		// 	money: "面议"
		// 	position: "广东东软学院"
		// 	status: "新登记"
		// 	statusBgColor: "rgb(232, 245, 233)"
		// 	statusTextColor: "rgb(45, 125, 50)"
		// 	time: "2025-02-12"
	}).catch((err) => {
		uni.showToast({
			title: '请检查网络',
			icon: 'none'
		});
	});
}
</script>

<style>
.job-detail {
	background: #fff;
	border-radius: 3vmin;
	box-shadow: 0 0.5vmin 2vmin #0000000a;
}

.header {
	padding: 6vmin;
	border-bottom: 0.25vmin solid #f0f0f0;
}

.company-info {
	display: flex;
	gap: 4vmin;
	margin-bottom: 6vmin;
}

.company-logo {
	--size: 16vmin;
    width: var(--size);
    height: var(--size);
    border-radius: 2vmin;
    background-image: var(--icon);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

.company-meta {
	flex: 1;
}

.company-name {
	font-size: 4.5vmin;
	font-weight: 600;
	color: #333;
	margin-bottom: 3vmin;
}

.company-tags {
	display: flex;
	gap: 2vmin;
}

.tag {
	padding: 1vmin 2vmin;
	border-radius: 1vmin;
	font-size: 3vmin;
	background: #f5f5f5;
	color: #666;
}

.job-header {
	display: flex;
	flex-direction: column;
	gap: 4vmin;
}

.job-title-wrap {
	display: flex;
	align-items: center;
	gap: 3vmin;
}

.job-title {
	font-size: 6vmin;
	font-weight: 600;
	color: #333;
}

.job-status {
	padding: 1vmin 2vmin;
	border-radius: 1vmin;
	font-size: 3vmin;
	background-color: var(--bg);
    color: var(--c);
}

.job-meta {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	align-items: flex-start;
	gap: 3vmin;
}

.salary {
	font-size: 5vmin;
	font-weight: 600;
	color: #ff4081;
}

.job-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 2vmin;
    margin-bottom: 3vmin;
}

.meta-items {
	display: flex;
	flex-wrap: wrap;
	gap: 4vmin;
}

.meta-item {
	display: flex;
	font-size: 4vmin;
	align-items: center;
	gap: 1vmin;
	color: #666;
}

.meta-items .meta-icon {
	width: 4vmin;
	height: 4vmin;
	background-image: var(--icon);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.content {
	padding: 6vmin;
}

.section {
	margin-bottom: 3vmin;
}

.job-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 3vmin;
    margin-bottom: 4vmin;
    padding: 3vmin;
    background: #f8f8f8;
    border-radius: 2vmin;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 1vmin;
}

.highlight-item > view {
    font-size: 3.5vmin;
    color: #07c160;
}

.section-title {
	font-size: 4vmin;
	font-weight: 600;
	color: #333;
	margin-bottom: 4vmin;
}

.highlights {
	display: flex;
	flex-wrap: wrap;
	gap: 4vmin;
	padding: 4vmin;
	background: #f8f8f8;
	border-radius: 2vmin;
}

.highlight-item {
	font-size: 4vmin;
	display: flex;
	align-items: center;
	gap: 2vmin;
	color: #07c160;
}

.highlight-icon {
	width: 5vmin;
	height: 5vmin;
}

.description,
.requirements {
	font-size: 3.5vmin;
	line-height: 1.6;
	color: #666;
}

.address {
	display: flex;
	gap: 3vmin;
	padding: 4vmin;
	background: #f8f8f8;
	border-radius: 2vmin;
}

.address-icon {
	width: 5vmin;
	height: 5vmin;
	color: #666;
}

.address-info {
	flex: 1;
}

.address-text {
	font-size: 3.5vmin;
	color: #333;
	margin-bottom: 1vmin;
}

.address-detail {
	font-size: 3vmin;
	color: #999;
}

.li {
	padding-left: 7.5vmin;
	position: relative;
}

.li::before {
	--size: 1.25vmin;
	content: "";
	display: block;
	background-color: #000;
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 2vmin;
	transform: translateY(-50%);
}

.actions {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 4vmin;
    padding: 4vmin 6vmin;
	padding-bottom: 10vmin;
    background: #fff;
    border-top: 0.1vmin solid #f0f0f0;
}

.action-btn {
	text-align: center;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2vmin;
    height: 11vmin;
    border-radius: 5.5vmin;
    font-size: 4vmin;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all .2s ease;
}

.action-btn.collect {
    background: #f5f5f5;
    color: #666;
}

.action-btn.apply {
    background: #07c160;
    color: #fff;
}

.action-btn .icon {
	width: 4vmin;
	height: 4vmin;
	background-image: var(--icon);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

</style>
